<!--新增/编辑/查看-->
<template>
  <el-dialog
    v-loading.lock="loading"
    v-toggle-full
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :append-to-body="true"
    :title="title"
    align="center"
    :close-on-click-modal="false"
    :visible.sync="innerDialogFormVisible"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>
    <el-form
      ref="formData"
      label-width="100px"
      :model="formData"
      :rules="formDataRules"
      status-icon
    >
      <el-row>
        <el-col :span="10">
          <el-form-item
            :label="dataList.RecordNumber"
            :label-width="formLabelWidth"
            prop="num"
            :error="errorMsg.num"
          >
            <el-input v-model="formData.num" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item
            :label="$t('ModuleDevice.components.selectEqu')"
            :label-width="formLabelWidth"
            prop="deviceId"
            :error="errorMsg.deviceId"
          >
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="selectDevice()"
              >{{ btn.Select }}</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
      <div style="margin-top: -20px; margin-bottom: 20px">
        <el-table
          :data="deviceTable"
          element-loading-text="Loading"
          fit
          align="center"
          border
          highlight-current-row
          height="100px"
        >
          <el-table-column :label="dataList.DeviceNumber" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="dataList.DeviceSpecifications"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.specifications }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSupplierName" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.supplierName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="dataList.DevicePersonResponsibleId"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.personResponsibleName }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row>
        <el-col :span="10">
          <el-form-item
            :label="dataList.SelectDateTime"
            :label-width="formLabelWidth"
            prop="selectTime"
            :error="errorMsg.selectTime"
          >
            <el-date-picker
              v-model="formData.selectTime"
              type="daterange"
              :range-separator="dataList.To"
              :start-placeholder="dataList.StartDate"
              :end-placeholder="dataList.EndDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button type="primary" @click="onSubmit">{{ btn.Save }}</el-button>
      <el-button @click="cancel">{{ btn.Cancel }}</el-button>
    </span>

    <DeviceDialogList
      v-if="choiceDeviceVisible"
      :dialog-form-visible.sync="choiceDeviceVisible"
      :multiple-select-state.sync="multipleSelectState"
      @closeChoiceDevice="closeChoiceDevice"
    />
  </el-dialog>
</template>
<script>
import {
  GetDeviceMaintenanceRecordNum,
  create,
} from "../../../api/DeviceMaintenanceRecord";
import DeviceDialogList from "../../../components/DeviceDialogList.vue";
import { formatTime } from "../../../utils/time";

export default {
  name: "DeviceMaintenanceRecordEdit",
  components: { DeviceDialogList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      multipleSelectState: false,
      choiceDeviceVisible: false,
      innerDialogFormVisible: false,
      formatTime,
      title: i18n.t("ModuleDevice.Device.GenerateRecord"),
      formLabelWidth: "100px",
      generateNum: "",
      deviceTable: [],
      formData: {
        num: "",
        deviceId: "",
        selectTime: null,
        selectStartTime: null,
        selectEndTime: null,
        // true系统生成的编号
        generateNumState: true,
      },
      errorMsg: {
        num: "",
        deviceId: "",
        selectTime: "",
      },
      formDataRules: {
        num: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        deviceId: [
          {
            required: true,
            trigger: "blur",
            message:   "请选择数据",
          },
        ],
        selectTime: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.init();
  },

  methods: {
    onSubmit() {
      if (this.formData.num !== this.generateNum) {
        this.formData.generateNumState = false;
      }
      this.formData.selectStartTime = this.formData.selectTime[0] + " 00:00:00";
      this.formData.selectEndTime = this.formData.selectTime[1] + " 23:59:59";
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true;
          create(this.formData)
            .then((res) => {
              if (res.code === 200) {
                this.innerDialogFormVisible = false;
                this.$emit("update:dialogFormVisible", false);
                this.$emit("close", res.data);
              }
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    // 选择设备
    selectDevice() {
      this.choiceDeviceVisible = true;
    },
    closeChoiceDevice(data) {
      this.deviceTable = [];
      this.deviceTable.push(data);
      this.formData.deviceId = data.id;
    },
    init() {
      GetDeviceMaintenanceRecordNum({}).then((res) => {
        this.formData.num = res.data;
        this.generateNum = res.data;
      });
      this.setDefaultDateRange();
    },
    closedDialog() {
      this.cancel();
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
      this.$emit("close");
    },
    setDefaultDateRange() {
      const startDate = new Date(); // 当前时间
      startDate.setDate(1); // 设置为本月1日
      const endDate = new Date(); // 当前时间
      this.formData.selectTime = [formatTime(startDate), formatTime(endDate)];
    },
  },
};
</script>
